<template>
  <div>
    <el-button v-if="type==='NO-SCAN'" slot="reference" size="mini" type="info" plain>
      {{ $t('resource.uncheck') }}
    </el-button>
    <el-button v-if="type==='NO-RISK'" slot="reference" size="mini" type="success" plain>
      {{ $t('resource.n_risk') }}
    </el-button>
    <el-button v-if="type==='HAVE-RISK'" slot="reference" size="mini" type="danger" plain @click="showRegions">
      {{ $t('resource.have_risk') }}
    </el-button>

    <!--regions-->
    <el-drawer class="rtl" :title="$t('resource.vuln_statistics')" :visible.sync="regionsVisible" size="75%"
               :before-close="handleClose" :direction="direction" :destroy-on-close="true">
      <el-descriptions class="margin-top desc-top" title="" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-paperclip"></i>
            {{ $t('resource.Hummer_ID') }}
          </template>
          {{ hummerId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-house"></i>
            {{ $t('account.cloud_account') }}
          </template>
          {{ accountName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-information"></i>
            {{ $t('dashboard.resource_type') }}
          </template>
          {{ resourceType }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table :border="true" :stripe="true" :data="string2PrettyFormat" class="adjust-table table-content">
        <el-table-column v-slot:default="scope" :label="$t('resource.i18n_task_type')" min-width="15%"
                         show-overflow-tooltip>
                <span>
                  <template v-for="tag in tagSelect">
                    <span :key="tag.value" v-if="scope.row.ruleTags">
                      <span :key="tag.tagKey" v-if="scope.row.ruleTags.indexOf(tag.tagKey) > -1"> {{
                          tag.tagName
                        }}</span>
                    </span>
                  </template>
                  <span v-if="!!scope.row.resourceTypes && scope.row.resourceTypes.indexOf('.')===-1"> {{
                      scope.row.resourceTypes
                    }}</span>
                  <span v-if="!!scope.row.resourceTypes && scope.row.resourceTypes.indexOf('.')>-1">
                    <template v-for="type in resourceTypes">
                      <span :key="type.value" v-if="scope.row.resourceTypes">
                        <span :key="type.value" v-if="scope.row.resourceTypes.indexOf(type.value) > -1"> [{{
                            type.value
                          }}]</span>
                      </span>
                    </template>
                  </span>
                </span>
        </el-table-column>
        <el-table-column v-slot:default="scope" :label="$t('rule.rule_name')" min-width="18%" show-overflow-tooltip>
          <el-link type="primary" :underline="false" class="md-primary text-click" @click="showTaskDetail(scope.row)">
            {{ scope.row.taskName }}
          </el-link>
        </el-table-column>
        <el-table-column v-slot:default="scope" :label="$t('rule.severity')" min-width="8%"
                         prop="severity" :sortable="true"
                         show-overflow-tooltip>
          <span v-if="scope.row.severity == 'HighRisk'" style="color: #f84846;"> {{ $t('rule.HighRisk') }}</span>
          <span v-else-if="scope.row.severity == 'MediumRisk'" style="color: #fe9636;">{{
              $t('rule.MediumRisk')
            }}</span>
          <span v-else-if="scope.row.severity == 'LowRisk'" style="color: #4dabef;"> {{ $t('rule.LowRisk') }}</span>
          <span v-else> N/A</span>
        </el-table-column>

        <el-table-column v-slot:default="scope" :label="$t('resource.status_on_off')" prop="returnSum" sortable
                         show-overflow-tooltip min-width="8%">
          <span style="color: #f84846;">{{ $t('resource.i18n_compliance_false') }}</span>
        </el-table-column>
      </el-table>
      <cloud-detail-chart v-if="resources && supportPlugins.includes(pluginId)" :resourceItemId="resourceItemId"/>
      <div class="desc-top" v-if="resources && resources != '{}'">
        <el-divider><i class="el-icon-folder-opened"></i></el-divider>
        <result-read-only :row="typeof(resources) === 'string'?JSON.parse(resources):resources"></result-read-only>
        <el-divider><i class="el-icon-document-checked"></i></el-divider>
      </div>
    </el-drawer>
    <!--regions-->
  </div>
</template>

<script>
/* eslint-disable */
import {getCurrentAccountID} from "@/common/js/utils";
import CloudDetailChart from "@/business/components/cloudSituation/head/CloudDetailChart";
import ResultReadOnly from "@/business/components/cloudSituation/head/ResultReadOnly";
import {resourceTypesUrl, tagRuleListUrl} from "@/api/cloud/rule/rule";
import {
  cloudResourceByIdUrl,
  cloudTaskDetailUrl,
  resourceRiskListUrl,
  resourceTaskCountUrl
} from "@/api/cloud/account/account";

export default {
  name: "ResourceType",
  components: {CloudDetailChart, ResultReadOnly},
  props: {
    hummerId: String,
    riskCount: Number,
    accountId: String,
    regionId: String,
    resourceType: String,
    accountName: String,
    resourceItemId: String,
    pluginId: String,
  },
  data() {
    return {
      string2PrettyFormat: [],
      regionsVisible: false,
      direction: 'rtl',
      type: 'NO-SCAN',
      tagSelect: [],
      detailVisible: false,
      detailForm: {},
      resources: '{}',
      supportPlugins: ['hummer-aws-plugin', 'hummer-aliyun-plugin', 'hummer-huawei-plugin', 'hummer-qcloud-plugin'],
    }
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      await this.$get(cloudResourceByIdUrl + this.resourceItemId, response => {
        let data = response.data;
        this.resources = data;
      });
    },
    async initSelect() {
      this.tagSelect = [];
      await this.$get(tagRuleListUrl, response => {
        this.tagSelect = response.data;
      });
      this.resourceTypes = [];
      await this.$get(resourceTypesUrl, response => {
        for (let item of response.data) {
          let typeItem = {};
          typeItem.value = item.name;
          typeItem.label = item.name;
          this.resourceTypes.push(typeItem);
        }
      });
      if (!!getCurrentAccountID()) {
        this.accountId = getCurrentAccountID();
      }
    },
    getType() {
      this.type = "NO-SCAN";
      if (this.riskCount && this.riskCount > 0) {
        this.type = "HAVE-RISK";
      } else {
        this.result = this.$get(resourceTaskCountUrl + this.accountId + "/" + this.regionId + "/" + this.resourceType, response => {
          if (response.data > 0) {
            this.type = "NO-RISK";
          } else {
            this.type = "NO-SCAN";
          }
        });
      }
    },
    showTaskDetail(item) {
      this.$router.push({
        name: 'cloudResult',
        params: {id: item.accountId},
      }).catch(error => error);
      this.detailForm = {};
      this.$get(cloudTaskDetailUrl + item.id, response => {
        if (response.success) {
          this.detailForm = response.data;
          this.detailVisible = true;
        }
      });
    },
    showRegions() {
      this.initSelect();
      let params = {
        regionId: this.regionId,
        hummerId: this.hummerId
      };
      this.result = this.$post(resourceRiskListUrl, params, response => {
        this.string2PrettyFormat = response.data
        this.regionsVisible = true;
      });
    },
    handleClose() {
      this.regionsVisible = false;
      this.detailVisible = false;

    },
  },
  watch: {
    hummerId: {
      handler(newVal, oldVal) {
        this.getType()
      },
      // 立即处理 进入页面就触发
      immediate: true
    }
  }
}
</script>

<style scoped>
.rtl >>> .el-drawer__body {
  overflow-y: auto;
  padding: 20px;
}

.rtl >>> input {
  width: 100%;
}

.rtl >>> .el-select {
  width: 80%;
}

.rtl >>> .el-form-item__content {
  width: 60%;
}

.code-mirror {
  height: 600px !important;
}

.code-mirror >>> .CodeMirror {
  /* Set height, width, borders, and global font properties here */
  height: 600px !important;
}

/deep/ :focus {
  outline: 0;
}

.desc-top {
  margin: 15px;
}

</style>
